<script>
export default {
  data() {
    return {
      tableData: [],
      form: {},
      current: 1,
      pageSize: 4,
      total: 0,
      goods:[],
      dialogTableVisible: false,
    };
  },
  methods: {
    updatestatus(row, status) {
      row.goodstatus = status;
      this.axios.post(`http://localhost:8000/xm-goods/goods-list/update`, row).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        }
        this.submitForm();
      })
    },
    handleViewAndProcess(row) {
      this.dialogTableVisible = true
      this.axios.get(`http://localhost:8000/xm-goods/goods-list/findbyclassification?classification=${row.classification}`).then(res => {
        if (res.data.code == 200) {
          this.goods = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },
    resetForm() {
      this.form = {}
    },
    submitForm() {
      this.axios.post(`http://localhost:8000/xm-goods/goods-classification/findpage?current=${this.current}&pageSize=${this.pageSize}`, this.form).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
    },
  },
  created() {
    this.submitForm();
  },
}
</script>

<template>
  <div class="classification">
    <el-tabs v-model="activeTab" type="card" style="width: 85%;border: none">
      <el-form :model="formData" ref="form" label-width="80px">
        <el-form-item label="">
          分类ID
          <el-input v-model="form.id" style="width: 250px;"></el-input>
          分类名称
          <el-input v-model="form.classification" style="width: 250px;"></el-input>
          创建时间
          <el-select v-model="form.ztime" placeholder="全部" style="width: 200px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="近三个月" value="1"></el-option>
            <el-option label="今年内" value="2"></el-option>
            <el-option label="2022年" value="3"></el-option>
            <el-option label="2021年" value="4"></el-option>
            <el-option label="2020年" value="5"></el-option>
            <el-option label="2020年以前" value="6"></el-option>
          </el-select>
          <el-button type="warning" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-card style="border-color: white">
        <el-table :data="tableData" style="width: 100%" align="center">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column label="分类">
            <template slot-scope="scope">
              <el-button type="text" @click="handleViewAndProcess(scope.row)">{{ scope.row.classification }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="createtime" label="创建时间"></el-table-column>
          <el-table-column prop="sfky" label="是否可用"></el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[4, 8, 16, 32]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-card>

      <el-dialog title="商品列表" :visible.sync="dialogTableVisible" width="70%">
        <el-table :data="goods">
          <el-table-column prop="" label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.goodsimage" width="50px">
            </template>
          </el-table-column>
          <el-table-column prop="" label="商品">
            <template slot-scope="scope">
              <a @click="handleViewAndProcess(scope.row)">{{ scope.row.item }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="" label="价格">
            <template slot-scope="scope">
              {{ scope.row.price }}￥
            </template>
          </el-table-column>
          <el-table-column prop="packingFee" label="打包费">
            <template slot-scope="scope">
              {{ scope.row.packingfee }}￥
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="库存"></el-table-column>
          <el-table-column prop="monthlysales" label="月售"></el-table-column>
          <el-table-column prop="shop" label="所属店铺"></el-table-column>
          <el-table-column label="提交时间" width=" 160px">
            <template slot-scope="scope">
              <div>{{ scope.row.submissiontime }}</div>
              <div align="center">{{ scope.row.goodstatus == 4 ? '在售中' : '已下架' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="审核状态">
            <template slot-scope="scope">
              {{ scope.row.reviewstatus == 0 ? '待审核' : scope.row.reviewstatus == 1 ? '审核中' : scope.row.reviewstatus == 2 ? '审核通过' : '审核拒绝' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
<!--              <el-button type="text" v-if="scope.row.reviewstatus==0" @click="handleViewAndProcess(scope.row)">···</el-button>-->
              <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus!=4" @click="updatestatus(scope.row,4)">出售</el-button>
              <el-button type="text" v-if="scope.row.reviewstatus==2&&scope.row.goodstatus==4" @click="updatestatus(scope.row,2)">下架</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    </el-tabs>
  </div>
</template>

<style>

</style>
